
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>店铺Banner设置</title>
    <script>
        var editor;
        KindEditor.ready(function (K) {
            editor = K.create('textarea[name="courseDetail"]', {
                resizeType: 1,
                allowPreviewEmoticons: false,
                allowImageUpload: true,
                uploadJson: '${ctx}/file_upload?dir=image',
                items: [
                    'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                    'insertunorderedlist', '|', 'emoticons', 'image', 'multiimage', 'unlink', 'baidumap', 'table', 'wordpaste', '|', 'preview', 'fullscreen']
            });

        });

        $("#form_submit").click(function(){
//                alert("提交动作");
            $("#product_form").submit();
        });
    </script>

    <link rel="stylesheet" type="text/css" href="${ctx}/assets/webuploader-0.1.5/webuploader.css">
    <script src="${ctx}/assets/webuploader-0.1.5/webuploader.js"></script>
    <script>
        function up(){
            //console.log("up");
            var txt = $('#myTxt').val();
            //console.log(txt);
            var bool = isNaN(txt);
            //console.log(bool);
            if(bool){
                alert("你输入的不是数字，请重新输入：");
            }
        }
    </script>
</head>

<body>
<c:choose>
    <c:when test="${shop==1}">
        你没有申请店铺
    </c:when>
    <c:otherwise>
<div class="navigation">
    <div class="crumbs ">
        <i class="tm-iconfont icon-info"></i>
        <a href="#">卖家中心</a><span>&gt;</span><a href="#200">店铺管理</a><span>&gt;</span><a href="${ctx}/shop_banner">店铺Banner设置</a><span>&gt;</span>修改店铺Banner
    </div>
    <div class="help">
        <a href="#" target="_blank">卖家交易学习专区</a>
    </div>
</div>
<form:form modelAttribute="WxShopBannerModel" action="${ctx}/add/shop_banner" method="post" id="product_form">
<div class="line-all">
    <div class="re_content p-tb20">
        <div class="u_tableform p-lr20">
            <div class="item">
                <label class="label tar">Banner：<span>*</span></label>
                <div class="cont_txt">
                    <ul class="upload_A l" style="padding:0;">
                            <form:hidden path="image"></form:hidden>
                            <div id="uploader-demo">
                                <!--用来存放item-->
                                <div id="fileList" class="uploader-list"></div>
                                <div id="filePicker">选择图片</div>
                            </div>
                            <form:errors path="image"></form:errors>
                    </ul>
                </div>
            </div>
            <div class="item">
                <label class="label tar">链接：<span>*</span></label>
                <div class="cont_txt">
                    <form:input path="link" type="text" cssClass="text" cssStyle="width:400px;" value="" placeholder="链接"  ></form:input>
                    <form:errors path="link" cssClass="text" cssStyle="width:400px;"></form:errors>
                    <%--<input type="text" class="text" style="width:400px;" />--%>
                </div>
            </div>
            <div class="item">
                <label class="label tar">优先等级：</label>
                <div class="cont_txt">
                    <form:input path="orderNum" type="number" cssClass="text w240" value="" placeholder="数字越大优先等级越高"  ></form:input>
                    <form:errors path="orderNum" cssClass="text w240"></form:errors>
                    <%--<input type="text" class="text w240" />--%>
                    <span class="p-l10 c-999999">数字越大优先等级越高</span>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="tac p-t40">
    <button id="form_submit" class="i_btn u2 p-lr50">保存</button>
    <div style="padding-bottom:100px; height:10px;"></div>
</div>
</div>
</form:form>
</c:otherwise>
</c:choose>
<script>
    // 单图片上传demo
    jQuery(function () {
        var $ = jQuery, $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,

        // 缩略图大小
                thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio,

        // Web Uploader实例
                uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({
            // 自动上传。

            auto: true,

            // swf文件路径
            swf: '${ctx}/assets/js/webuploader-0.1.5//js/Uploader.swf',

            // 文件接收服务端。
            server: '${ctx}/file_upload?dir=image',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },

            // 上传文件个数
            fileNumLimit: 1,
            // 全局设置, 文件上传请求的参数表，每次发送都会发送此对象中的参数。

        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
                    + '<img>'
                    + '</div>'), $img = $li.find('img');

            $list.html($li);

            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });

        //局部设置，给每个独立的文件上传请求参数设置，每次发送都会发送此对象中的参数。。参考：https://github.com/fex-team/webuploader/issues/145
        uploader.on('uploadBeforeSend', function (block, data, headers) {
            data.key = new Date().toLocaleTimeString();
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id), $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('').appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id), $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

        uploader.on('uploadAccept', function (file, response) {
//            debugger;
//            console.log($('#' + file.id).html());
//            console.log($.toJSON(response));
            if (response.error == 1) {
                // 通过return false来告诉组件，此文件上传有错。
                return false;
            } else {
                $('#image').val(response.url);
            }
        });

        // 先从文件队列中移除之前上传的图片，第一次上传则跳过
        $("#filePicker").on('click', function () {
            if (!WebUploader.Uploader.support()) {
                var error = "上传控件不支持您的浏览器！请尝试升级flash版本或者使用Chrome引擎的浏览器。<a target='_blank' href='http://se.360.cn'>下载页面</a>";
                console.log(error);
                return;
            }

            var id = $list.find("div").attr("id");
            if (undefined != id) {
                uploader.removeFile(uploader.getFile(id));
            }
        });

    });
</script>
</body>